<template>
  <div class="white-box">
    <el-table class="table-mb" v-loading="loading" :data="list" :header-cell-style="{ background: '#F5F7FA' }" :height="userSid?450:'auto'"
              element-loading-background="rgba(255, 255, 255, 0.6)">
      <!--      <el-table-column prop="sid" label="sid" width="50"></el-table-column>-->
      <el-table-column prop="avatar" label="头像"  align="center" min-width="66" max-width="66" width="66">
        <template #default="{ row }">
          <el-avatar :size="40" :src="proxy.imgUrl + row.avatar" style="display: block">
            <img :src="defaultAvatar"/>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="nickName" label="用户名">
        <template #default="{ row }">
          <span style="margin-right: 10px;display: inline-block">{{row.nickName}}</span>
          <el-icon v-if="row.sex === 0">
            <Male color="#409eff"/>
          </el-icon>
          <el-icon v-if="row.sex === 1">
            <Female color="#f89898"/>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="订单总金额" width="200"></el-table-column>
      <el-table-column prop="created" label="创建时间" width="160"> </el-table-column>
    </el-table>
    <el-pagination
        background
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="pageSizeNum"
        :total="totalNums"
        layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <go-back/>
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRouter
} from "vue-router"
import {
  CirclePlus, Download, Lock, Search
} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
const router = useRouter()
const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  listApiPath,
  list,
  dialogFormRef,
  dialogShow,
  dialogForm,
  dialogParams,
  handleSearch,
  getData,
  handleAdd,
  handleEdit,
  resetDialogForm,
  handleAllSelected,
  submitDialogForm,
  closeDialog,
  handleAction,
  handleDelete
} = listMixins()

const selectOptions = reactive({
  roleSids: [],
  sex: [
    {label: '未知', value: 2},
    {label: '男', value: 0},
    {label: '女', value: 1},
  ],
  status: [
    {label: '正常', value: 0},
    {label: '停用', value: 1},
  ]
})
const props = defineProps({
  userSid: {
    type: String,
    default: '',
  },
})
const fleshData = () =>{
  getData()
}
defineExpose({
  fleshData
})
if(props.userSid){
  searchParams.userSid = props.userSid
}
apiPath.value = '/item/lower-user';

onMounted(() => {
  getData()
})


</script>

<style lang="less">

</style>